<template>
  <div class="header">
    <div class="head">
      <i class="iconfont icon-yiliaohangyedeICON-1"></i>
      <div>
        <p>长途汽车订票系统</p>
        <span>Long distance bus booking system</span>
      </div>
    </div>
    <div class="content">
      <div class="head-content">
        <p>English</p>
        <div>
          <a @click.prevent>登录</a>
          <span>|</span>
          <a @click.prevent="ceshi($router.currentRoute.path)">注册</a>
        </div>
      </div>
      <div class="foot-content">
        <el-menu :default-active="$router.currentRoute.path"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect"
                 background-color="transparent"
                 active-text-color="yellow"
                 text-color="#fff"
                 router>
          <el-menu-item index="/lun">首页</el-menu-item>
          <el-menu-item index="/gong">订票</el-menu-item>
          <el-menu-item index="3">打车</el-menu-item>
          <el-menu-item index="4">酒店</el-menu-item>
          <el-menu-item index="5">服务</el-menu-item>
          <el-menu-item index="/my">我的</el-menu-item>
        </el-menu>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'Tiao',
  props: [],
  methods: {
    // handleSelect (key, keyPath) {
    //   console.log(key, keyPath);
    // }
  },
  data () {
    return {
    }
  },


}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.active {
  background-color: rgba($color: #9b95c9, $alpha: 0.2);
  color: #fff;
}
.header {
  padding: 0 50px;
  height: 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url('../assets/5.jpg') no-repeat;
  background-size: 100% auto;
  .head {
    display: flex;
    align-items: center;
    i {
      margin: 0 20px 0 0;
    }
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: start;
      p {
        margin: 0px;
        font-family: 'KaiTi';
        font-size: 36px;
      }
      span {
        font-size: 20px;
        margin: 0 0 0 8px;
      }
    }
  }
  .content {
    width: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;

    .head-content {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 0 0;
      p {
        font-size: 22px;
        cursor: pointer;
      }
      div {
        margin: 0 24px;
        a {
          cursor: pointer;
          font-size: 22px;
          text-align: center;
          width: 80px;
        }
        span {
          font-size: 22px;
          font-weight: 700;
        }
      }
    }
    .foot-content {
      .el-menu {
        margin: 10px 0 0;
        .el-menu-item {
          font-size: 24px;
        }
      }
    }
  }
}
</style>